wp.customize.Control.extend.initKirkiControl - Code Metrics - Inspection of "3.0.17" - aristath/kirki - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Pull Request — master (#1653)

by Aristeides

created 2017-12-04 19:34 UTC

wp.customize.Control.extend.initKirkiControl B

↳ Parent: controls/js/src/background-legacy.js

Complexity

Conditions	3
Paths	2

Size

Total Lines

114

Duplication

Lines	114
Ratio	100 %

Importance

Changes

Metric	Value
cc	3
nc	2
nop	0
dl	114
loc	114
rs	8.2857
c	0
b	0
f	0

7 Functions

Rating	Duplication	Size	Complexity
A	3	3	1
A	3	3	1
A	5	5	1
A	3	3	1
B	43	43	1
A	3	3	1
B	25	25	3

How to fix Long Method

/* global kirkiControlLoader */
wp.customize.controlConstructor['kirki-background'] = wp.customize.Control.extend({


	// When we're finished loading continue processing
	ready: function() {

		'use strict';

		var control = this;
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console

		// Init the control.
		if ( ! _.isUndefined( window.kirkiControlLoader ) && _.isFunction( kirkiControlLoader ) ) {
			kirkiControlLoader( control );
		} else {
			control.initKirkiControl();
		}
	},

	initKirkiControl: function() {

		var control = this,
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
		    value   = control.getValue(),
		    picker  = control.container.find( '.kirki-color-control' );

		// Hide unnecessary controls if the value doesn't have an image.
		if ( _.isUndefined( value['background-image'] ) || '' === value['background-image'] ) {
			control.container.find( '.background-wrapper > .background-repeat' ).hide();
			control.container.find( '.background-wrapper > .background-position' ).hide();
			control.container.find( '.background-wrapper > .background-size' ).hide();
			control.container.find( '.background-wrapper > .background-attachment' ).hide();
		}

		// Color.
		picker.wpColorPicker({
			change: function() {
				setTimeout( function() {
					control.saveValue( 'background-color', picker.val() );
				}, 100 );
			}
		});

		// Background-Repeat.
		control.container.on( 'change', '.background-repeat select', function() {
			control.saveValue( 'background-repeat', jQuery( this ).val() );
		});

		// Background-Size.
		control.container.on( 'change click', '.background-size input', function() {
			control.saveValue( 'background-size', jQuery( this ).val() );
		});

		// Background-Position.
		control.container.on( 'change', '.background-position select', function() {
			control.saveValue( 'background-position', jQuery( this ).val() );
		});

		// Background-Attachment.
		control.container.on( 'change click', '.background-attachment input', function() {
			control.saveValue( 'background-attachment', jQuery( this ).val() );
		});

		// Background-Image.
		control.container.on( 'click', '.background-image-upload-button', function( e ) {
			var image = wp.media({ multiple: false }).open().on( 'select', function() {
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console

				// This will return the selected image from the Media Uploader, the result is an object.
				var uploadedImage = image.state().get( 'selection' ).first(),
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
				    previewImage   = uploadedImage.toJSON().sizes.full.url,
				    imageUrl,
				    imageID,
				    imageWidth,
				    imageHeight,
				    preview,
				    removeButton;

				if ( ! _.isUndefined( uploadedImage.toJSON().sizes.medium ) ) {
					previewImage = uploadedImage.toJSON().sizes.medium.url;
				} else if ( ! _.isUndefined( uploadedImage.toJSON().sizes.thumbnail ) ) {
					previewImage = uploadedImage.toJSON().sizes.thumbnail.url;
				}

				imageUrl    = uploadedImage.toJSON().sizes.full.url;
				imageID     = uploadedImage.toJSON().id;

				imageWidth  = uploadedImage.toJSON().width;

				imageHeight = uploadedImage.toJSON().height;


				// Show extra controls if the value has an image.
				if ( '' !== imageUrl ) {
					control.container.find( '.background-wrapper > .background-repeat, .background-wrapper > .background-position, .background-wrapper > .background-size, .background-wrapper > .background-attachment' ).show();
				}

				control.saveValue( 'background-image', imageUrl );
				preview      = control.container.find( '.placeholder, .thumbnail' );
				removeButton = control.container.find( '.background-image-upload-remove-button' );

				if ( preview.length ) {
					preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + previewImage + '" alt="" />' );
				}
				if ( removeButton.length ) {
					removeButton.show();
				}
		    });

			e.preventDefault();
		});

		control.container.on( 'click', '.background-image-upload-remove-button', function( e ) {

			var preview,
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
			    removeButton;

			e.preventDefault();

			control.saveValue( 'background-image', '' );

			preview      = control.container.find( '.placeholder, .thumbnail' );
			removeButton = control.container.find( '.background-image-upload-remove-button' );

			// Hide unnecessary controls.
			control.container.find( '.background-wrapper > .background-repeat' ).hide();
			control.container.find( '.background-wrapper > .background-position' ).hide();
			control.container.find( '.background-wrapper > .background-size' ).hide();
			control.container.find( '.background-wrapper > .background-attachment' ).hide();

			if ( preview.length ) {
				preview.removeClass().addClass( 'placeholder' ).html( 'No file selected' );
			}
			if ( removeButton.length ) {
				removeButton.hide();
			}
		});
	},

	/**
	 * Gets the value.
	 */
	getValue: function() {

		var control = this,
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
		    value   = {};

		// Make sure everything we're going to need exists.
		_.each( control.params['default'], function( defaultParamValue, param ) {
			if ( false !== defaultParamValue ) {
				value[ param ] = defaultParamValue;
				if ( ! _.isUndefined( control.setting._value[ param ] ) ) {
					value[ param ] = control.setting._value[ param ];
				}
			}
		});
		_.each( control.setting._value, function( subValue, param ) {
			if ( _.isUndefined( value[ param ] ) ) {
				value[ param ] = subValue;
			}
		});
		return value;
	},

	/**
	 * Saves the value.
	 */
	saveValue: function( property, value ) {

		'use strict';

		var control   = this,
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
		    input     = jQuery( '#customize-control-' + control.id.replace( '[', '-' ).replace( ']', '' ) + ' .background-hidden-value' ),
		    valueJSON = jQuery( input ).val(),
		    valueObj  = JSON.parse( valueJSON );

		valueObj[ property ] = value;
		control.setting.set( valueObj );
		jQuery( input ).attr( 'value', JSON.stringify( valueObj ) ).trigger( 'change' );
	}
});


1		/* global kirkiControlLoader */
2	View Code Duplication	wp.customize.controlConstructor['kirki-background'] = wp.customize.Control.extend({
		0 ignored issues – show Duplication introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report This code seems to be duplicated in your project. Loading history...
3
4		// When we're finished loading continue processing
5		ready: function() {
6
7		'use strict';
8
9		var control = this;
		0 ignored issues – show Coding Style introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined The variable is not defined otuside of its block. This limits bleeding of variables into other contexts. To know more about this ECMA6 feature, look at the MDN pages on let and const. Loading history...
10
11		// Init the control.
12		if ( ! _.isUndefined( window.kirkiControlLoader ) && _.isFunction( kirkiControlLoader ) ) {
13		kirkiControlLoader( control );
14		} else {
15		control.initKirkiControl();
16		}
17		},
18
19		initKirkiControl: function() {
20
21		var control = this,
		0 ignored issues – show Coding Style introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined The variable is not defined otuside of its block. This limits bleeding of variables into other contexts. To know more about this ECMA6 feature, look at the MDN pages on let and const. Loading history...
22		value = control.getValue(),
23		picker = control.container.find( '.kirki-color-control' );
24
25		// Hide unnecessary controls if the value doesn't have an image.
26		if ( _.isUndefined( value['background-image'] ) \|\| '' === value['background-image'] ) {
27		control.container.find( '.background-wrapper > .background-repeat' ).hide();
28		control.container.find( '.background-wrapper > .background-position' ).hide();
29		control.container.find( '.background-wrapper > .background-size' ).hide();
30		control.container.find( '.background-wrapper > .background-attachment' ).hide();
31		}
32
33		// Color.
34		picker.wpColorPicker({
35		change: function() {
36		setTimeout( function() {
37		control.saveValue( 'background-color', picker.val() );
38		}, 100 );
39		}
40		});
41
42		// Background-Repeat.
43		control.container.on( 'change', '.background-repeat select', function() {
44		control.saveValue( 'background-repeat', jQuery( this ).val() );
45		});
46
47		// Background-Size.
48		control.container.on( 'change click', '.background-size input', function() {
49		control.saveValue( 'background-size', jQuery( this ).val() );
50		});
51
52		// Background-Position.
53		control.container.on( 'change', '.background-position select', function() {
54		control.saveValue( 'background-position', jQuery( this ).val() );
55		});
56
57		// Background-Attachment.
58		control.container.on( 'change click', '.background-attachment input', function() {
59		control.saveValue( 'background-attachment', jQuery( this ).val() );
60		});
61
62		// Background-Image.
63		control.container.on( 'click', '.background-image-upload-button', function( e ) {
64		var image = wp.media({ multiple: false }).open().on( 'select', function() {
		0 ignored issues – show Coding Style introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined The variable is not defined otuside of its block. This limits bleeding of variables into other contexts. To know more about this ECMA6 feature, look at the MDN pages on let and const. Loading history...
65
66		// This will return the selected image from the Media Uploader, the result is an object.
67		var uploadedImage = image.state().get( 'selection' ).first(),
		0 ignored issues – show Coding Style introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined The variable is not defined otuside of its block. This limits bleeding of variables into other contexts. To know more about this ECMA6 feature, look at the MDN pages on let and const. Loading history...
68		previewImage = uploadedImage.toJSON().sizes.full.url,
69		imageUrl,
70		imageID,
71		imageWidth,
72		imageHeight,
73		preview,
74		removeButton;
75
76		if ( ! _.isUndefined( uploadedImage.toJSON().sizes.medium ) ) {
77		previewImage = uploadedImage.toJSON().sizes.medium.url;
78		} else if ( ! _.isUndefined( uploadedImage.toJSON().sizes.thumbnail ) ) {
79		previewImage = uploadedImage.toJSON().sizes.thumbnail.url;
80		}
81
82		imageUrl = uploadedImage.toJSON().sizes.full.url;
83		imageID = uploadedImage.toJSON().id;
		0 ignored issues – show Unused Code introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report The variable `imageID` seems to be never used. Consider removing it. Loading history...
84		imageWidth = uploadedImage.toJSON().width;
		0 ignored issues – show Unused Code introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report The variable `imageWidth` seems to be never used. Consider removing it. Loading history...
85		imageHeight = uploadedImage.toJSON().height;
		0 ignored issues – show Unused Code introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report The variable `imageHeight` seems to be never used. Consider removing it. Loading history...
86
87		// Show extra controls if the value has an image.
88		if ( '' !== imageUrl ) {
89		control.container.find( '.background-wrapper > .background-repeat, .background-wrapper > .background-position, .background-wrapper > .background-size, .background-wrapper > .background-attachment' ).show();
90		}
91
92		control.saveValue( 'background-image', imageUrl );
93		preview = control.container.find( '.placeholder, .thumbnail' );
94		removeButton = control.container.find( '.background-image-upload-remove-button' );
95
96		if ( preview.length ) {
97		preview.removeClass().addClass( 'thumbnail thumbnail-image' ).html( '<img src="' + previewImage + '" alt="" />' );
98		}
99		if ( removeButton.length ) {
100		removeButton.show();
101		}
102		});
103
104		e.preventDefault();
105		});
106
107		control.container.on( 'click', '.background-image-upload-remove-button', function( e ) {
108
109		var preview,
		0 ignored issues – show Coding Style introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined The variable is not defined otuside of its block. This limits bleeding of variables into other contexts. To know more about this ECMA6 feature, look at the MDN pages on let and const. Loading history...
110		removeButton;
111
112		e.preventDefault();
113
114		control.saveValue( 'background-image', '' );
115
116		preview = control.container.find( '.placeholder, .thumbnail' );
117		removeButton = control.container.find( '.background-image-upload-remove-button' );
118
119		// Hide unnecessary controls.
120		control.container.find( '.background-wrapper > .background-repeat' ).hide();
121		control.container.find( '.background-wrapper > .background-position' ).hide();
122		control.container.find( '.background-wrapper > .background-size' ).hide();
123		control.container.find( '.background-wrapper > .background-attachment' ).hide();
124
125		if ( preview.length ) {
126		preview.removeClass().addClass( 'placeholder' ).html( 'No file selected' );
127		}
128		if ( removeButton.length ) {
129		removeButton.hide();
130		}
131		});
132		},
133
134		/**
135		* Gets the value.
136		*/
137		getValue: function() {
138
139		var control = this,
		0 ignored issues – show Coding Style introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined The variable is not defined otuside of its block. This limits bleeding of variables into other contexts. To know more about this ECMA6 feature, look at the MDN pages on let and const. Loading history...
140		value = {};
141
142		// Make sure everything we're going to need exists.
143		_.each( control.params['default'], function( defaultParamValue, param ) {
144		if ( false !== defaultParamValue ) {
145		value[ param ] = defaultParamValue;
146		if ( ! _.isUndefined( control.setting._value[ param ] ) ) {
147		value[ param ] = control.setting._value[ param ];
148		}
149		}
150		});
151		_.each( control.setting._value, function( subValue, param ) {
152		if ( _.isUndefined( value[ param ] ) ) {
153		value[ param ] = subValue;
154		}
155		});
156		return value;
157		},
158
159		/**
160		* Saves the value.
161		*/
162		saveValue: function( property, value ) {
163
164		'use strict';
165
166		var control = this,
		0 ignored issues – show Coding Style introduced 2017-12-03 13:42 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined The variable is not defined otuside of its block. This limits bleeding of variables into other contexts. To know more about this ECMA6 feature, look at the MDN pages on let and const. Loading history...
167		input = jQuery( '#customize-control-' + control.id.replace( '[', '-' ).replace( ']', '' ) + ' .background-hidden-value' ),
168		valueJSON = jQuery( input ).val(),
169		valueObj = JSON.parse( valueJSON );
170
171		valueObj[ property ] = value;
172		control.setting.set( valueObj );
173		jQuery( input ).attr( 'value', JSON.stringify( valueObj ) ).trigger( 'change' );
174		}
175		});
176

aristath / kirki

Pull Request — master (#1653)

wp.customize.Control.extend.initKirkiControl B

Complexity

Size

Duplication

Importance

7 Functions

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like